<template>

  <div class="page">
    <!-- 搜索框 -->
    <my-search></my-search>
    <div class="center">
      
      <div class="left">
        <div :class="['left-item',cu_id==item.cat_id?'active':'']" v-for="item in catelist" :key="item.cat_id"  @click="diji(item.cat_id)">{{item.cat_name}}</div>
      </div>
      <div class="right">
        <div class="right_center"  v-for=" item in rightdata " :key="item.cat_id">
          <div class="right_title">{{item.cat_name}} </div>
        <div class="right_list" >
          <div class="right_item" v-for="(item,i) in item.children" :key="i">
            <img :src="item.cat_icon" alt="">
          <div>{{item.cat_name}}</div>
          </div>
          
         </div>
        </div>
        
      </div>
    
    </div>
    
  </div>
</template>
<script>
import request from "../../request"
export default {
  computed:{
    rightdata(){
     let te= this.catelist.filter(item=>{
      return  item.cat_id==this.cu_id
      })
      if(te.length==0){
        return false
      }
     return te[0].children
    }
  },
  created(){
    this.getdata()
  },
  data () {
    return {
      catelist:[],
      cu_id:1
    }
  },
  methods:{
   async getdata(){
     const res=await request("categories")
     console.log(res.data.message)
     this.catelist=res.data.message
    },
    diji(id){
      this.cu_id=id
    }
  }
}
</script>
<style  scoped>

.page{
  height:100%;
  
}
.center{
  
  height:100%;
  display: flex
 
  
}

.left{
  width: 250rpx;
  height:100%;
  background:#ccc;
   overflow: auto;

}
.right{
  width: 500rpx;
  height:100%;
   overflow: auto;
}
.left-item{
  font-size: 14px;
  padding: 10px;

}
.active{
  background: red;
}
.right_center{
   margin-top: 50rpx;
}
  .right_title{
    text-align: center;
    font-size: 14px;
  
  }
  .right_list{
    width: 500rpx;
    display: flex;
    flex-wrap: wrap;
   
  }
  .right_item{
    
    flex: 1;
    width: 200rpx;
    
    

  }
  .right_item img{
    width: 150rpx;
    height:150rpx;
  }
  .right_item div{
    width: 100rpx;
    text-align: center;
    font-size: 12px;
  }
</style>
